<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>YouDou</title>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css"  type="text/css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Owl Carousel Assets -->
    <link href="owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl-carousel/owl.theme.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css"  type="text/css">

    <!-- jQuery -->
    <script src="js/jquery-2.1.1.js"></script>

    <!-- Core JavaScript Files -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <!--Top-->
    <nav id="top">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <strong>Welcome to YouDou!</strong>
                </div>
                <div class="col-md-6 col-sm-6">
                    <ul class="list-inline top-link link">
                        <li><a href="UnComplete.html"><i class="fa fa-home"></i> Home</a></li>
                        <li><a href="UnComplete.html"><i class="fa fa-comments"></i> Contact</a></li>
                        <li><a href="#"><i class="fa fa-question-circle"></i> FAQ</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!--Navigation-->
    <nav id="menu" class="navbar">
        <div class="container">
            <div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
                <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="goUserIndex"><i class="fa fa-home"></i> 首页</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 登录/注册</a>
                        <div class="dropdown-menu">
                            <div class="dropdown-inner">
                                <ul class="list-unstyled">
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="register.html">Register</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-play-circle-o"></i> 视频分类</a>
                        <div class="dropdown-menu">
                            <div class="dropdown-inner">
                                <ul class="list-unstyled">
                                    <!--<li><form action="/searchFenlei/番剧"><a type="submit">番剧</a></form></li>-->
                                    <!--<li><form action="/searchFenlei/动画"><a>动画</a></form></li>-->
                                    <!--<li><form action="/searchFenlei/音乐"><a>音乐</a></form></li>-->
                                    <!--<li><form action="/searchFenlei/游戏"><a>游戏</a></form></li>-->
                                    <!--<li><form action="/searchFenlei/影视"><a>影视</a></form></li>-->
                                    <li><a href="/searchFenlei/all">全部</a></li>
                                    <li><a href="/searchFenlei/fanju">番剧</a></li>
                                    <li><a href="/searchFenlei/donghua">动画</a></li>
                                    <li><a href="/searchFenlei/yinyue">音乐</a></li>
                                    <li><a href="/searchFenlei/youxi">游戏</a></li>
                                    <li><a href="/searchFenlei/yingshi">影视</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
    <!-- /////////////////////////////////////////Content -->
    <div id="page-content" class="index-page">

        <div class="container">
            <div class="row">
                <div class="featured">
                    <div class="main-vid">
                        <div class="col-md-6">
                            <div class="zoom-container">
                                <div class="zoom-caption">
                                    <span id="s1">Video's Tag</span>
                                    <a id="a1" href="single.html">
                                        <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                    </a>
                                    <p id="p1">Video's Name</p>
                                </div>
                                <img src="images/level5.jpg" />
                            </div>
                        </div>
                    </div>
                    <div class="sub-vid">
                        <div class="col-md-3">
                            <div class="zoom-container">
                                <div class="zoom-caption">
                                    <span id="s2">Video's Tag</span>
                                    <a id="a2" href="single.html">
                                        <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                    </a>
                                    <p id="p2">Video's Name</p>
                                </div>
                                <img src="images/红彩光.jpg" />
                            </div>
                            <div class="zoom-container">
                                <div class="zoom-caption">
                                    <span id="s3">Video's Tag</span>
                                    <a id="a3" href="single.html">
                                        <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                    </a>
                                    <p id="p3">Video's Name</p>
                                </div>
                                <img src="images/街头高速.jpg" />
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="zoom-container">
                                <div class="zoom-caption">
                                    <span id="s4">Video's Tag</span>
                                    <a id="a4" href="single.html">
                                        <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                    </a>
                                    <p id="p4">Video's Name</p>
                                </div>
                                <img src="images/镜头深处.jpg" />
                            </div>
                            <div class="zoom-container">
                                <div class="zoom-caption">
                                    <span id="s5">Video's Tag</span>
                                    <a id="a5" href="single.html">
                                        <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                    </a>
                                    <p id="p5">Video's Name</p>
                                </div>
                                <img src="images/矩形深处.jpg" />
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="row">
                <div id="main-content" class="col-md-8">
                    <div class="box">
                        <div class="box-header">
                            <h2><i class="fa fa-globe"></i> Featured Videos</h2>
                        </div>
                        <div class="box-content">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s6">Video's Tag</span>
                                                <a id="a6" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p6">Video's Name</p>
                                            </div>
                                            <img src="images/polar2007_h_to_AVI_clip0.jpg" />
                                        </div>
                                        <h3 class="vid-name"><a id="a7" href="#">Video's Name</a></h3>
                                        <div class="info">
                                            <h5>By <a href="#">Kelvin</a></h5>
                                            <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                            <span><i class="fa fa-heart"></i>1,200</span>
                                        </div>
                                    </div>
                                    <p class="more">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan.</p>
                                    <!--<a href="single.html" class="btn btn-1">Read More</a>-->
                                    <a href="UnComplete.html" class="btn btn-1">Read More</a>
                                    <div class="line"></div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s8">Video's Tag</span>
                                                <a id="a8" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p8">Video's Name</p>
                                            </div>
                                            <img src="images/悬念片头.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a9" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s10">Video's Tag</span>
                                                <a id="a10" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p10">Video's Name</p>
                                            </div>
                                            <img src="images/作品3旋转.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a11" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s12">Video's Tag</span>
                                                <a id="a12" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p12">Video's Name</p>
                                            </div>
                                            <img src="images/倒计时.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a13" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s14">Video's Tag</span>
                                                <a id="a14" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p14">Video's Name</p>
                                            </div>
                                            <img src="images/level5.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a15" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s16">Video's Tag</span>
                                                <a id="a16" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p16">Video's Name</p>
                                            </div>
                                            <img src="images/街头高速.jpg" />
                                        </div>
                                        <h3 class="vid-name"><a id="a17" href="#">Video's Name</a></h3>
                                        <div class="info">
                                            <h5>By <a href="#">Kelvin</a></h5>
                                            <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                            <span><i class="fa fa-heart"></i>1,200</span>
                                        </div>
                                    </div>
                                    <p class="more">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan.</p>
                                    <a  href="UnComplete.html" class="btn btn-1">Read More</a>
                                    <div class="line"></div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s18">Video's Tag</span>
                                                <a id="a18" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p18">Video's Name</p>
                                            </div>
                                            <img src="images/矩形深处.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a19" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s20">Video's Tag</span>
                                                <a id="a20" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p20">Video's Name</p>
                                            </div>
                                            <img src="images/宇宙片头动画.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a21" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s22">Video's Tag</span>
                                                <a id="a22" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="o22">Video's Name</p>
                                            </div>
                                            <img src="images/动态背景.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a23" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post wrap-vid">
                                        <div class="zoom-container">
                                            <div class="zoom-caption">
                                                <span id="s24">Video's Tag</span>
                                                <a id="a24" href="single.html">
                                                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                                                </a>
                                                <p id="p24">Video's Name</p>
                                            </div>
                                            <img src="images/level5.jpg" />
                                        </div>
                                        <div class="wrapper">
                                            <h5 class="vid-name"><a id="a25" href="#">Video's Name</a></h5>
                                            <div class="info">
                                                <h6>By <a href="#">Kelvin</a></h6>
                                                <span><i class="fa fa-calendar"></i>25/3/2015</span>
                                                <span><i class="fa fa-heart"></i>1,200</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>



                <div id="sidebar" class="col-md-4">
                    <!---- Start Widget ---->
                    <div class="widget wid-follow">
                        <div class="heading"><h4><i class="fa fa-users"></i> Follow Us</h4></div>
                        <div class="content">
                            <ul class="list-inline">
                                <li>
                                    <a href="facebook.com/">
                                        <div class="box-facebook">
                                            <span class="fa fa-facebook fa-2x icon"></span>
                                            <span>1250</span>
                                            <span>Fans</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="facebook.com/">
                                        <div class="box-twitter">
                                            <span class="fa fa-twitter fa-2x icon"></span>
                                            <span>1250</span>
                                            <span>Fans</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="facebook.com/">
                                        <div class="box-google">
                                            <span class="fa fa-google-plus fa-2x icon"></span>
                                            <span>1250</span>
                                            <span>Fans</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <img src="images/banner.jpg" />
                        </div>
                        <div class="line"></div>
                    </div>
                    <!---- Start Widget ---->
                    <div class="widget wid-tags">
                        <div class="heading"><h4><i class="fa fa-tags"></i> Tag</h4></div>
                        <div class="content">
                            <ul class="list-inline">
                                <li><a href="#">animals ,</a></li>
                                <li><a href="#">cooking ,</a></li>
                                <li><a href="#">countries ,</a></li>
                                <li><a href="#">home ,</a></li>
                                <li><a href="#">likes ,</a></li>
                                <li><a href="#">photo ,</a></li>
                                <li><a href="#">travel ,</a></li>
                                <li><a href="#">video</a></li>
                            </ul>
                        </div>
                        <div class="line"></div>
                    </div>
                    <!---- Start Widget ---->
                    <div class="widget wid-post">
                        <div class="heading"><h4><i class="fa fa-comments"></i> Comment</h4></div>
                        <div class="content">
                            <div class="post">
                                <a href="single.html">
                                    <img src="images/user.png" />
                                </a>
                                <div class="wrapper">
                                    <a href="#"><h5>Curabitur tincidunt porta lorem.</h5></a>
                                    <ul class="list-inline">
                                        <li><i class="fa fa-calendar"></i>25/3/2015</li>
                                        <li><i class="fa fa-comments"></i>1,200</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="post">
                                <a href="single.html">
                                    <img src="images/user.png" />
                                </a>
                                <div class="wrapper">
                                    <a href="#"><h5>Curabitur tincidunt porta lorem.</h5></a>
                                    <ul class="list-inline">
                                        <li><i class="fa fa-calendar"></i>25/3/2015</li>
                                        <li><i class="fa fa-comments"></i>1,200</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="post">
                                <a href="single.html">
                                    <img src="images/user.png" />
                                </a>
                                <div class="wrapper">
                                    <a href="#"><h5>Curabitur tincidunt porta lorem.</h5></a>
                                    <ul class="list-inline">
                                        <li><i class="fa fa-calendar"></i>25/3/2015</li>
                                        <li><i class="fa fa-comments"></i>1,200</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="line"></div>
                    </div>
                    <div class="widget wid-banner">
                        <img src="images/banner-2.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
<footer>
    <div class="top-footer">
        <ul class="footer-social list-inline">
            <li><span>友情链接：</span></li>
            <li><a href="#"><i class="fa fa-twitter"></i> <span>Twitter</span></a></li>
            <li><a href="#"><i class="fa fa-facebook"></i> <span>Facebook</span></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i> <span>Google+</span></a></li>
            <li><a href="#"><i class="fa fa-youtube"></i> <span>Video's Tag</span></a></li>
            <li><a href="#"><i class="fa fa-vimeo-square"></i> <span>Vimeo</span></a></li>
        </ul>
    </div>
    <div class="wrap-footer">
        <div class="container">
            <div class="row">
                    <h2 class="footer-title">About Us</h2>
                    <div class="textwidget">HTML5弹幕播放网站-宋梦可&苏玉洋&吴冰&朱琰&林炼钧</div>
            </div>
        </div>
    </div>
</footer>
<!-- Footer -->
</body>
<script src="/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.get("/getAllVideos", function (data, status) {
        console.log( typeof (data));
        var str=JSON.stringify(data);
        console.log("str"+str);
        var videos = eval(str);
        var videosLength=videos.length;
        console.log("videosLength="+videosLength);
        for(var i=0;i<25;i++)
        {
            var j=i+1;
            var k=i%videosLength;
            console.log("j=="+j);
            //js可以根据查找元素 返回布尔值判定在不在，不在会不允许操作
            //jquery对不存在的元素也可以操作，找不找得到都会有返回值
            if($("#s"+j).length>0)
            {
                console.log("修改前span:"+$("#s"+j).html());
                $("#s"+j).html(videos[k].name);
                console.log("修改后span:"+$("#s"+j).html());
            }
            if($("#a"+j).length>0)
            {
                console.log("修改前a:"+$("#a"+j).val());
                $("#a"+j).val(videos[k].name);
                $("#a"+j).attr({href:"/go_videosplay/"+videos[k]._id});
                console.log("go_videosplay/"+videos[k]._id);
                console.log("修改后a:"+$("#a"+j).val());
            }
            if($("#p"+j).length>0)
            {
                console.log("修改前p:"+$("#p"+j).html());
                $("#a"+j).html(videos[k].name);
                console.log("修改后p:"+$("#p"+j).html(videos[k].name));
            }
        }
    });
</script>
</html>